<template>
    <div id="editor">
        <ckeditor :editor="editor" @ready="onReady" v-model="editorData" :config="editorConfig">

        </ckeditor>
        <div class="option">
            <el-button  type="primary" @click="save">保存</el-button>
            <el-button>发布</el-button>
        </div>

    </div>
</template>
<script>
    import DecoupledDoc from '@ckeditor/ckeditor5-build-decoupled-document';
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' //中文包
    import {Button} from "element-ui";
    import upload from "./upload";
    export default {
        name: "Editor",
        data(){
            return{
                editor: DecoupledDoc,
                editorData: '<h1>文档型富文本编辑器</h1>',
                editorConfig: {
                    language: 'zh-cn',  // 中文
                    extraPlugins: [ upload.MyCustomUploadAdapterPlugin ],
                }
            }
        },
        components: {
          "el-button": Button
        },
        created(){
        },
        methods:{
            onReady( editor )  {
                // 在可编辑区域之前插入工具栏。
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );

            },
            save(){
                console.log(this.editorData);
            }
        },
    };
</script>

<style>
    .ck-content{
        height: 500px;
    }
    .option{
        margin-left: 300px;
        margin-top: 30px;
    }
</style>
